import React, { Component } from 'react'
import 'antd/dist/antd.css'
// import Title from '../title/index'

class Top extends Component {

    state = {
        ind: 0,
        item: {name: '七表由手'}
    }

    //点击修改下标
    clickTu(index, item) {
        this.setState({
            ind: index,
            item: item
        })
        this.props.setInd(item)
    }

    render() { 
        let { ind, item } = this.state
        let { list, i } = this.props
        return (
            <div className='Top'>
                <div className='tu'>
                    {
                        list && list.length ? list[i].children.map((item,index) => {
                            return <img className={ind===index ? 'image' : ''} src={item.img} alt='' key={index} onClick={
                                this.clickTu.bind(this,index, item)
                            }/>
                        }) : <div>暂无数据</div>
                    }
                </div>
                <div className='title'>
                    <h2 style={{marginLeft: '20px', marginTop: '10px'}}>{item.name}</h2>
                </div>
            </div>
        )
    }
}
 
export default Top